﻿<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Converters="clr-namespace:TestBindingWithConverter.Converters"
    x:Class="TestBindingWithConverter.Views.CarsView"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True" 
    Unloaded="PhoneApplicationPage_Unloaded" >

    <phone:PhoneApplicationPage.Resources>
        <Converters:IntToOpacityConverter x:Key="IntToOpacityConverter"/>
    </phone:PhoneApplicationPage.Resources>
    <phone:PhoneApplicationPage.DataContext>
        <Binding Mode="OneWay" Path="CarsVM" Source="{StaticResource Locator}"/>
    </phone:PhoneApplicationPage.DataContext>
    <phone:PhoneApplicationPage.FontFamily>
        <StaticResource ResourceKey="PhoneFontFamilyNormal"/>
    </phone:PhoneApplicationPage.FontFamily>
    <phone:PhoneApplicationPage.FontSize>
        <StaticResource ResourceKey="PhoneFontSizeNormal"/>
    </phone:PhoneApplicationPage.FontSize>
    <phone:PhoneApplicationPage.Foreground>
        <StaticResource ResourceKey="PhoneForegroundBrush"/>
    </phone:PhoneApplicationPage.Foreground>
    
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" 
          Background="Transparent" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Style="{StaticResource PhoneTextNormalStyle}" 
                       Text="{Binding LocalizedResources.ApplicationTitle, Mode=OneWay, Source={StaticResource LocalizedStrings}}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="20*"/>
                <RowDefinition Height="80*" />
            </Grid.RowDefinitions>
            <Rectangle Grid.Row="0" 
                       Opacity="{Binding SelectedCar, Converter={StaticResource IntToOpacityConverter}}" 
                       Fill="#FFD1E22A"  />
            <ListBox Grid.Row="1" 
                     ItemsSource="{Binding Cars}" 
                     SelectedItem="{Binding SelectedCar, Mode=TwoWay}" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Border 
                            BorderThickness="1" 
                            Margin="2.5" 
                            CornerRadius="2" 
                            Background="{StaticResource PhoneChromeBrush}" 
                            BorderBrush="{StaticResource PhoneBorderBrush}"
                            Padding="12">
                            <StackPanel Background="#FF4B4B4B">
                                <TextBlock Margin="6" 
                                           Text="{Binding Company}" 
                                           HorizontalAlignment="Center" 
                                           FontSize="{StaticResource PhoneFontSizeMediumLarge}" 
                                           FontWeight="Bold" />
                                <TextBlock Text="{Binding Name}" 
                                    HorizontalAlignment="Left" />
                                <TextBlock Text="{Binding Year}" 
                                    HorizontalAlignment="Left" />
                            </StackPanel>
                        </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>